<template>
  <view class="page-container record-container">
    <view class="record-item" v-for="item in list" :key="item.id">
      <view class="record-item-title">{{item.examEndTime}}</view>
      <view class="record-item-desc">
        <view class="record-item-tag red-tag">
          <view>分数</view>
          <view>{{item.examScore}}分</view>
        </view>
        <view class="record-item-tag orange-tag">34'33''</view>
      </view>
      <view>

      </view>
      <view class="arrow">
        <u-icon name="arrow-right" color="#CACACA" size="20"></u-icon>
      </view>
    </view>
    <view class="record-item">
      <view class="record-item-title">2023年3月4日 12:00:00</view>
      <view class="record-item-desc">
        <view class="record-item-tag red-tag">
          <view>分数</view>
          <view>89分</view>
        </view>
        <view class="record-item-tag orange-tag">34'33''</view>
      </view>
      <view>

      </view>
      <view class="arrow">
        <u-icon name="arrow-right" color="#CACACA" size="20"></u-icon>
      </view>
    </view>
    <view class="record-item">
      <view class="record-item-title">2023年3月4日 12:00:00</view>
      <view class="record-item-desc">
        <view class="record-item-tag red-tag">
          <view>分数</view>
          <view>89分</view>
        </view>
        <view class="record-item-tag orange-tag">34'33''</view>
      </view>
      <view>

      </view>
      <view class="arrow">
        <u-icon name="arrow-right" color="#CACACA" size="20"></u-icon>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getMyExamRecords
  }
  from "@/common/api/exam/exam.js";
  export default {
    data() {
      return {
        list:[]
      }
    },
    onLoad(option) {
      this.getMyExamRecordsData();
    },
    methods: {
      getMyExamRecordsData() {
        getMyExamRecords().then(res => {
          console.log(res)
          this.list = res.row;
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page-container {
    background-color: #E6ECF9;
    min-height: 100%;
  }

  .record-container {
    padding: 0 4%;
    padding-top: 30rpx;
  }

  .record-item {
    position: relative;
    background-color: #ffffff;
    border-radius: 12rpx;
    margin-bottom: 20rpx;
    padding: 20rpx;

    .arrow {
      position: absolute;
      right: 20rpx;
      top: 60rpx;
    }
  }

  .record-item-title {
    font-size: 34rpx;
    color: #323232;
    font-weight: bold;
    margin-bottom: 20rpx;
  }

  .record-item-tag {
    overflow: hidden;
    display: inline-block;
    margin-right: 16rpx;
    border-radius: 6rpx;
    font-size: 20rpx;

    >view {
      float: left;
    }

    &.red-tag {
      background-color: #FF3649;

      >view:first-child {

        border: 1px solid #FF3649;
        color: #fff;
        padding: 6rpx 16rpx;
      }

      >view:last-child {
        background-color: #fff;
        padding: 6rpx 16rpx;
        border: 1px solid #FF3649;
        color: #FF3649;
        border-radius: 6rpx;
      }
    }

    &.orange-tag {
      padding: 6rpx 16rpx;
      border: 1px solid rgba(255, 107, 0, 1);
      color: rgba(255, 107, 0, 1);
    }
  }
</style>